<template>
	<div>
		<header>
			当前选择：
			<el-select v-model="value" placeholder="请选择" @change="change">
			    <el-option
			      v-for="item in departmentArr"
			      :key="item.id"
			      :label="item.name"
			      :value="item.name">
			    </el-option>
		  	</el-select>
		</header>
		<div class="container" :style="{height: heightClient}">
			<div class="container_top">
				<span>业务总览</span>
				<span @click="more('业务')">更多></span>
			</div>
			<div class="c_f">
				<div class="kuai" v-for="item in yewus">
					<div class="kuai_title">
						{{item.title}}
					</div>
					<ul class="ul">
						<li>
							<span>{{item.count1}}</span><br>
							<span>{{item.value1}}</span>
						</li>
						<li>
							<span>{{item.count2}}</span><br>
							<span>{{item.value2}}</span>
						</li>
						<li>
							<span>{{item.count3}}</span><br>
							<span>{{item.value3}}</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="container_top">
				<span>收支总览</span>
				<span @click="more('收支')">更多></span>
			</div>
			<div class="c_s">
				<div class="s_f">
					<div class="come">
						<div class="come_t">
							<span>医疗收入<span class="unit">(万元)</span></span><br>
							<span>(累积)</span><br>
							<span>{{treaIncThisMonth}}</span><br>
							<span :style="{color: treaInctrend === 'desc' ?'#89D769':'#EC7676'}">{{percentageTreaInc}}</span>
							<span v-if="treaInctrend === 'desc'"><img src="./../assets/desc.png"></span>
							<span v-else><img src="./../assets/asc.png"></span>
						</div>
						<div class="come_c">
							<span>同期</span>
							<span>{{treaIncSamePeriod}}</span>
						</div>
					</div>
					<div ref="allincome" style="width: calc(100% - 215px);height: calc(100% - 10px); padding:5px;"></div>
				</div>
				<div class="s_s">
					<div class="come">
						<div class="come_t">
							<span>医疗支出<span class="unit">(万元)</span></span><br>
							<span>(累积)</span><br>
							<span>{{treaOutThisMonth}}</span><br>
							<span :style="{color: treaOuttrend === 'desc' ?'#89D769':'#EC7676'}">{{percentagetreaOut}}</span>
							<span v-if="treaOuttrend === 'desc'"><img src="./../assets/desc.png"></span>
							<span v-else><img src="./../assets/asc.png"></span>
						</div>
						<div class="come_c">
							<span>同期</span>
							<span>{{treaOutSamePeriod}}</span>
							
						</div>
					</div>
					<div ref="alloutput" style="width: calc(100% - 215px);height: calc(100% - 10px); padding:5px;"></div>
				</div>
				<div class="s_t">
					<div class="come">	
						<div class="come_t">
							<span>医疗结余<span class="unit">(万元)</span></span><br>
							<span>(累积)</span><br>
							<span>{{emeLeftThisMonth}}</span><br>
							<span :style="{color: emeLefttrend === 'desc' ?'#89D769':'#EC7676'}">{{percentageEmeLeft}}</span>
							<span v-if="emeLefttrend === 'desc'"><img src="./../assets/desc.png"></span>
							<span v-else><img src="./../assets/asc.png"></span>
						</div>
						<div class="come_c">
							<span>同期</span>
							<span>{{emeLeftSamePeriod}}</span>
							
						</div>
					</div>
				</div>
			</div>
			<div class="container_top">
				<span>绩效总览</span>
				<span @click="more('绩效')">更多></span>
			</div>
			<div class="c_t">
				<div class="t_f">
					<div class="come">
						<div class="come_t">
							<span>绩效总额<span class="unit">(万元)</span></span><br>
							<span>(本月)</span><br>
							<span>{{perTotalNumThisMonth}}</span><br>
							<span :style="{color: perTotalUnittrend === 'desc' ?'#89D769':'#EC7676'}">{{percentageAll}}</span>
							<span v-if="perTotalUnittrend === 'desc'"><img src="./../assets/desc.png"></span>
							<span v-else><img src="./../assets/asc.png"></span>
						</div>
						<div class="come_c">
							<span>同期</span>
							<span>{{perTotalNumSamePeriod}}</span>
							
						</div>
					</div>
					<div class="come">
						<div class="come_t">
							<span>人均月绩效<span class="unit">(元)</span></span><br>
							<span>(本月)</span><br>
							<span>{{averPeoThisMonth}}</span><br>
							<span :style="{color: peopleAvetrend === 'desc' ?'#89D769':'#EC7676'}">{{percentageAve}}</span>
							<span v-if="peopleAvetrend === 'desc'"><img src="./../assets/desc.png"></span>
							<span v-else><img src="./../assets/asc.png"></span>
						</div>
						<div class="come_c">
							<span>同期</span>
							<span>{{averPeoSamePeriod}}</span>
							
						</div>
					</div>
				</div>
				<div class="t_s">
					<div class="come" style="width: 15%;">
						<div class="come_t" style="border: none;">
							<span>绩效构成</span><br>
							<!-- <span>12,122</span><br> -->
							<span>(本月)</span>
						</div>
					</div>
					<div ref="moneyCustructors" style="width: calc(85% - 10px);height: calc(100% - 10px);padding:5px;" v-show="!moneyCustructorsImg"></div>
					<div v-show="moneyCustructorsImg" style="width: calc(85% - 10px);height: calc(100% - 10px);padding:5px;">
						<img src="./../assets/lacklength.svg" style="display: block;position: relative;top: 20%;left: 30%;">
					</div>
				</div>
				<div class="t_t">
					<div class="come">	
						<div class="output_title">
							<span>扣罚情况</span>
							<span>（元）</span><br>
							<span>（本月）</span>
						</div>
						<div class="bottom">
							<ul class="output_bottom_left">
								<li>
									<span>{{refusePay}}</span><br>
									<span>医保拒付</span>
								</li>
								<li>
									<span>{{safePen}}</span><br>
									<span>医疗安全部扣罚</span>
								</li>
								<li>
									<span>{{otherPay}}</span><br>
									<span>其他</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	import axios from 'axios'
	export default {
		props: ['month'],
		data () {
			return {
				heightClient: '0px',
				tabShow: true,
				value: '',
				depId: '',
				type: '',
				desc: '',
				//后勤保障
				refusePay: "", //医保拒付
				safePen: "", //医疗安全扣罚
				otherPay: "", //其他扣罚
				treaOutThisMonth: "", //医疗支出本月
				emeLeftThisMonth: "", //医疗结余本月
				treaIncThisMonth: "", //医疗收入本月
				treaOutSamePeriod: "", //医疗支出同期
				emeLeftSamePeriod: "", //医疗结余同期
				treaIncSamePeriod: "", //医疗收入同期
				percentagetreaOut: "", //医疗支出幅度百分比
				percentageEmeLeft: '', //医疗结余幅度百分比
				percentageTreaInc: '', //医疗收入幅度百分比
				perTotalNumThisMonth: "", //绩效总额本月
				perTotalNumSamePeriod: "", //绩效总额同期
				percentageAll: "", //绩效总额幅度百分比
				averPeoThisMonth: "", //人均绩效本月
				averPeoSamePeriod: "", //人均绩效同期
				percentageAve: "", //人均绩效幅度百分比
				treaInctrend: "", //医疗收入趋势
				treaOuttrend: "", //医疗支出趋势
				emeLefttrend: "", //医疗结余趋势
				perTotalUnittrend: "", //绩效总额趋势
				peopleAvetrend: "", //人均绩效趋势
				//支出结构图表
				fixedOut: "", //固定资产折旧
				healthOut: "", //卫生材料
				invOut: "", //无形资产摊销
				medOut: "", //药品费
				otherOut: "", //医疗其他支出
				peoOut: "", //人员经费
				riskOut: "", //医疗风险基金
				yewuArr: [], //医技医辅累
				//top
				inPeo: "", //入院人数
				outPeo: "", //出院人数
				aveHosDay: "", //平均住院日
				editBed: "", //编制床位数
				bedRate: "", //病床使用率
				bedTranTimes: "", //平均病床周转次数
				outpatientPeo: "", //门诊人次
				emergencyPeo: "", //急诊人次
				averPeoDay: "", //日均诊疗人次
				surgeryNum: "", //手术量
				surgeryHos: "", //住院手术量
				surgeryEme: "", //门诊手术量
				moneyCustructorsImg: false,//绩效构成缺省图片
				yewus: [
					{
						title: '住院情况',
						value1: '入院人数',
						value2: '出院人数',
						value3: '平均住院日',
						count3: '',
						count2: '',
						count1: ''
					},
					{
						title: '门急诊情况',
						value1: '门诊量',
						value2: '急诊量',
						value3: '日均诊疗人数',
						count3: '',
						count2: '',
						count1: ''
					},
					{
						title: '床位情况',
						value1: '编制床位数',
						value2: '病床使用率',
						value3: '平均病床周转次数',
						count3: '',
						count2: '',
						count1: ''
					},
					{
						title: '手术情况',
						value1: '月手术量',
						value2: '住院手术量',
						value3: '门诊手术量',
						count3: '',
						count2: '',
						count1: ''
					}
				],
				optionsHosIn: {

			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '17%',
			    	bottom: '15%',
			    	right: '0%',
			    	left: '15%'
			    },
			    legend: {
			    		itemWidth: 12,
			        data:[
			        	{
			        		icon: 'circle',
			        		name: '本月'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '同期'
			        	}
			        ]
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			                formatter: '{value}'
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			            splitLine: {
			            	lineStyle: {
			            		color: '#E6E6E6',
			            		type: 'dashed'
			            	}
			            }
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        },
			        {
			            name:'同期',
			            type:'line',
			            yAxisIndex: 1,
			            symbolSize: 10,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#FBC05A'
			            	}
			            }
			        }
			    ] 
				},
				optionsAllMoney: {

			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '17%',
			    	bottom: '15%',
			    	right: '0%',
			    	left: '15%'
			    },
			    legend: {
			    		itemWidth: 12,
			        data:[
			        	{
			        		icon: 'circle',
			        		name: '本月'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '同期'
			        	}
			        ]
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			                formatter: '{value}'
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			            splitLine: {
			            	lineStyle: {
			            		color: '#E6E6E6',
			            		type: 'dashed'
			            	}
			            }
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        },
			        {
			            name:'同期',
			            type:'line',
			            yAxisIndex: 1,
			            symbolSize: 10,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#FBC05A'
			            	}
			            }
			        }
			    ] 
				},
				optionsAvePeople:{

			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '17%',
			    	bottom: '15%',
			    	right: '0%',
			    	left: '15%'
			    },
			    legend: {
			    		itemWidth: 12,
			        data:[
			        	{
			        		icon: 'circle',
			        		name: '本月'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '同期'
			        	}
			        ]
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			                formatter: '{value}'
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			            splitLine: {
			            	lineStyle: {
			            		color: '#E6E6E6',
			            		type: 'dashed'
			            	}
			            }
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        },
			        {
			            name:'同期',
			            type:'line',
			            yAxisIndex: 1,
			            symbolSize: 10,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#FBC05A'
			            	}
			            }
			        }
			    ] 
				},
				optionsIncomeCustructor: {
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%',
			    	left: '5%',
			    	right: '0',
			    	bottom: '21%'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['人员经费','卫生材料','药品费','固定资产折旧', '无形资产摊销', '医疗风险基金', '其他'],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			             axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        }
			    ] 
				},
				optionsMoneyCustructor: {
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%',
			    	left: '5%',
			    	right: '0',
			    	bottom: '21%'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			             axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        }
			    ] 
				},
				optionsMoneyCustructors: {
					backgroundColor: '#FCFCFC',
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '15%',
			    	left: '10%',
			    	right: '10%',
			    	bottom: '22%'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['月绩效','药品节约','手术','耗材节约绩效', '医联体', '教学奖', '优质护理奖'],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			             axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[4, 11, 7, 10, 11, 20,19,12],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        }
			    ] 
				},
				optionsMoneyCustructorss: {
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%',
			    	left: '5%',
			    	right: '0',
			    	bottom: '21%'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['月绩效','药品节约','手术','耗材节约绩效', '医联体', '教学奖', '优质护理奖'],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: false
			            },
			             axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        }
			    ] 
				},
				optionsAlloutput: {
				backgroundColor: '#FCFCFC',	
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '15%',
			    	left: '0',
			    	right: '0',
			    	bottom: '22%'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['医疗耗材','人员经费','药品费','固定资产折旧', '无形资产摊销', '医疗风险基金' , '其他'],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			            	interval: 0,
			                formatter: '{value}'
			            },
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        }
			    ] 
				},
				optionsAllincome: {
				backgroundColor: '#FCFCFC',	
			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '15%',
			    	left: '10%',
			    	right: '10%',
			    	bottom: '22%'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['住院收入','门诊收入'],
			            axisPointer: {
			                // type: 'shadow'
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	},
			            	

			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0',
			            	formatter: function(params) {
			            		return Number(params.value).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
			            	}
			            },
			            
			        }
			    ] 
				},
				optionsAlloutputs: {

			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%',
			    	left: '0',
			    	right: '0'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['医疗耗材','人员经费','药品费','固定资产折旧', '无形资产摊销', '医疗风险基金' , '其他'],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            axisLabel: {
			                formatter: '{value}'
			            },
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0'
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        }
			    ] 
				},
				optionsAllincomes: {

			    tooltip: {
			        trigger: 'axis'
			    },
			    grid: {
			    	top: '12%',
			    	left: '7%',
			    	right: '7%'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['住院收入','门诊收入'],
			            axisPointer: {
			                show: false
			            },
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 21,
			            data:[],
			            itemStyle: {
			            	normal: {
			            		color: '#91B1E7'
			            	}
			            },
			            label: {
			            	show: true,
			            	position: 'top',
			            	color: '#B0B0B0'
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#81A6ED'
			            	}
			            }
			        }
			    ] 
				},
				departmentArr: [],
				refusePay: "", //医保拒付
				safePen: "", //医疗安全扣罚
				otherPay: "", //其他扣罚
				treaOutThisMonth: "", //医疗支出本月
				perTotalNumThisMonth: "", //绩效总额本月
				averPeoThisMonth: "", //人均绩效本月
				treaOutSamePeriod: "", //医疗支出同期
				perTotalNumSamePeriod: "", //绩效总额同期
				averPeoSamePeriod: "", //人均绩效同期
				percentageOutlay: "", //医疗支出幅度百分比
				percentageAll: "", //绩效总额幅度百分比
				percentageAve: "" //人均绩效幅度百分比
			}
		},
		created () {
			this.heightClient = document.body.clientHeight - 170 + 'px'
			this.getDepartment()
			// this.depId = this.$store.state.department
			
			// this.assistantDepAnalyse()
		},
		mounted () {
			
		},
		props: ['month'],
		watch: {
			month (newV, oldV) {
				this.month = newV
				this.getDepartment()
				// this.serviceDepAnalyse()
				// this.assistantDepAnalyse()
			}
		},
		methods: {
			number(data) {
	  			if(data != null) {
	  				return data.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
	  			} else {
	  				return
	  			}
	  		}, 
			nav_click (type) {
				type === 'money' ? this.$router.push('/income') : type === 'business' ? this.$router.push('/all') : this.$router.push('/jixiaoall')
			},
			more (type) {
				if (type === '收支'){
					this.$router.push('/i-jixiao/' + type)
				} else if (type === '绩效') {
					this.$router.push('/d-jixiao/' + type)
				} else if (type === '业务') {
					this.$router.push('/y-jixiao/' + type)
				}
			},
			change (name) {
				var type = ''
				var id = ''
				this.departmentArr.forEach((item) => {
					if (item.name === name) {
						type = item.type
						id = item.id
					}
				})
				this.depId = id
				this.value = name
				sessionStorage.setItem('depName',name)
				type === '临床服务' ? this.type = '临床服务类' : type === '后勤保障' ? this.type = '后勤保障类' : this.type = '医技医辅类'
				// alert(this.type)
				if (type === '临床服务') {
						this.type = '临床服务类'
						this.serviceDepAnalyse()
						this.$router.push('/section-service/' + this.depId)

				} else if (type === '医技医辅') {
					this.type = '医技医辅类'
					this.$router.push('/section-hospital/' + this.depId)
					// this.$nextTick(() => {
					// }) 
				}else {
					this.$router.push('/section-analysis/' + this.depId)
				}
			},
			tab (type) {
				// this.$nextTick(() => {
					// type === 'all' ? this.tabShow = true : this.tabShow = false

					if (type === 'all') {
						// alert(1)
						this.tabShow = true
					} else {
						this.tabShow = false
						this.$nextTick(() => {
							this.myChart3 = echarts.init(this.$refs.hosincome)
							this.myChart3.setOption(this.optionsHosIncome)
							this.myChart4 = echarts.init(this.$refs.hosoutput)
							this.myChart4.setOption(this.optionsHosOutput)
						})
					}
				// })
			},
			getDepartment () {
 				
          var qs = require('qs');
          var self = this
          axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'getDepartment',
              platform: 'web',
	              monthTime: self.month
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             })
             .then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	let id = ''
               self.departmentArr = rep.data.data.department
               
                if(!sessionStorage.getItem('depName')) {
               		sessionStorage.setItem('depName',rep.data.data.department[0].name)
               		self.value = rep.data.data.department[0].name
               	} else {
               		self.value = sessionStorage.getItem('depName')
                }
                self.departmentArr.forEach((item) => {
					if (item.name === self.value) {
						self.depId = item.id
					}
				})
               self.serviceDepAnalyse()
              }
             }).catch(function (error) {
              // console.log(error);
             });
 			},
 			serviceDepAnalyse () {
          var qs = require('qs');
          var self = this
          axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'serviceDepAnalyse',
              platform: 'web',
              depId: self.depId,
              monthTime: self.month
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             })
             .then(function (rep) {
              if (rep.data.statusCode === '10001') {

              	var info = rep.data.data.clinicalService.thisMonth
              	var infos = rep.data.data.clinicalService.samePeriod
              	self.inPeo = self.number(info.busHosMonthDep.inPeo)//入院人数
              	self.yewus[0].count1 = self.inPeo
				self.outPeo = self.number(info.busHosMonthDep.outPeo)//出院人数
				self.yewus[0].count2 = self.outPeo
				self.aveHosDay = self.number(info.busHosMonthDep.aveHosDay) //平均住院日
				self.yewus[0].count3 = self.aveHosDay
				self.editBed = self.number(info.busHosMonthDep.editBed) //编制床位数
				self.yewus[2].count1 = self.editBed
				self.bedRate = info.busHosMonthDep.bedRate //病床使用率
				self.yewus[2].count2 = self.bedRate
				self.bedTranTimes = self.number(info.busHosMonthDep.bedTranTimes) //平均病床周转次数
				self.yewus[2].count3 = self.bedTranTimes
				self.outpatientPeo = self.number(info.outpatientPeo) //门诊人次
				self.yewus[1].count1 = self.outpatientPeo
				self.emergencyPeo = self.number(info.emergencyPeo) //急诊人次
				self.yewus[1].count2 = self.emergencyPeo
				self.averPeoDay = self.number(info.averPeoDay) //日均诊疗人次
				self.yewus[1].count3 = self.averPeoDay
				self.surgeryNum = self.number(info.surgeryNum )//手术量
				self.yewus[3].count1 = self.surgeryNum
				self.surgeryHos = self.number(info.surgeryHos) //住院手术量
				self.yewus[3].count2 = self.surgeryHos
				self.surgeryEme = self.number(info.surgeryEme) //门诊手术量
				self.yewus[3].count3 = self.surgeryEme

				//医疗收入
              	self.optionsAllincome.xAxis[0].data = info.incomeTrend.xData
              	self.optionsAllincome.series[0].data = info.incomeTrend.yData
              	self.myChart6 = echarts.init(self.$refs.allincome)
				self.myChart6.setOption(self.optionsAllincome)

				//医疗支出
				self.optionsAlloutput.xAxis[0].data = info.outlayTrend.xData
				self.optionsAlloutput.series[0].data = info.outlayTrend.yData
				self.myChart7 = echarts.init(self.$refs.alloutput)
				self.myChart7.setOption(self.optionsAlloutput)

				//绩效
				self.optionsMoneyCustructors.xAxis[0].data = info.perTotalUnit.xData
				self.optionsMoneyCustructors.series[0].data = info.perTotalUnit.yData
				self.myChart8 = echarts.init(self.$refs.moneyCustructors)
				self.moneyCustructorsImg = false
				if (info.perTotalUnit.xData.length == 0) {
					self.moneyCustructorsImg = true
				} else {
					self.myChart8.clear()
					self.myChart8.setOption(self.optionsMoneyCustructors)	
				}
				//koufa
				self.refusePay = self.number(info.refusePay) //医保拒付
				self.safePen = self.number(info.safePen) //医疗安全扣罚
				self.otherPay = self.number(info.otherPay) //其他扣罚

				self.treaOutThisMonth = self.number((Number(info.treaOut)/10000).toFixed(2)) //医疗支出本月
				self.emeLeftThisMonth = self.number((Number(info.emeLeft)/10000).toFixed(2))//医疗结余本月
				self.treaIncThisMonth = self.number((Number(info.treaInc)/10000).toFixed(2)) //医疗收入本月
				self.treaOutSamePeriod = self.number((Number(infos.incMonthDep.treaOut.numerical)/10000).toFixed(2)) //医疗支出同期
				self.emeLeftSamePeriod = self.number((Number(infos.incMonthDep.emeLeft.numerical)/10000).toFixed(2)) //医疗结余同期
				self.treaIncSamePeriod = self.number((Number(infos.incMonthDep.treaInc.numerical)/10000).toFixed(2)) //医疗收入同期
				self.percentagetreaOut = infos.incMonthDep.treaOut.percentage //医疗支出幅度百分比
				self.percentageEmeLeft = infos.incMonthDep.emeLeft.percentage //医疗结余幅度百分比
				self.percentageTreaInc = infos.incMonthDep.treaInc.percentage //医疗收入幅度百分比
				self.perTotalNumThisMonth = self.number((Number(info.perTotalNum)/10000).toFixed(2)) //绩效总额本月
				self.perTotalNumSamePeriod = self.number(Number(infos.perMonthDep.perTotalNum.numerical)) //绩效总额同期
				self.percentageAll = infos.perMonthDep.perTotalNum.percentage //绩效总额幅度百分比
				// alert(self.percentageAll)
				self.averPeoThisMonth = self.number(info.averPeo) //人均绩效本月
				self.averPeoSamePeriod = self.number(infos.perMonthDep.averPeo.numerical) //人均绩效同期
				self.percentageAve = infos.perMonthDep.averPeo.percentage //人均绩效幅度百分比

				self.treaInctrend = infos.incMonthDep.treaInc.trend//医疗收入趋势
				self.treaOuttrend = infos.incMonthDep.treaOut.trend //医疗支出趋势
				self.emeLefttrend = infos.incMonthDep.emeLeft.trend //医疗结余趋势
				self.perTotalUnittrend = infos.perMonthDep.perTotalNum.trend //绩效总额趋势
				self.peopleAvetrend = infos.perMonthDep.averPeo.trend //人均绩效趋势
              } else if (rep.data.statusCode === '10003'){
              	 self.$router.push('/login')
              } else if(rep.data.statusCode === '00002') {
             	
             	var type = ''
				var name = sessionStorage.getItem('depName')
				var id =''
				self.departmentArr.forEach((item) => {
					if (item.name === name) {
						type = item.type
						id = item.id
					}
				})
				self.depId = id
				type === '临床服务' ? self.type = '临床服务类' : type === '后勤保障' ? self.type = '后勤保障类' : self.type = '医技医辅类'
				// alert(self.type)
				if (type === '临床服务') {
						self.type = '临床服务类'
						self.serviceDepAnalyse()
						self.$router.push('/section-service/' + self.depId)

				} else if (type === '医技医辅') {
					self.type = '医技医辅类'
					self.$router.push('/section-hospital/' + self.depId)
					// self.$nextTick(() => {
					// }) 
				}else {
					self.$router.push('/section-analysis/' + self.depId)
				}
             }
             } 
             ).catch(function (error) {
              // console.log(error);
             });
 			}
 			
		}
	}
</script>
<style lang="scss" scoped>
	.ul{
		display: flex;
		width: 100%;
		height: calc(100% - 50px);
		text-align: center;
		li{
			width: 33%;
			height: 30%;
			position: relative;
			top: 25%;
			color: #9B9B9B;
			font-size: 12px;
			border-right: 1px solid #ccc;
			span:first-child{
				font-size: 25px;
				color: #4D4D4D;
				line-height: 40px;
			}
		}
		li:last-child{
			border-right: 0px;
		}
	}
	header {
		width: 100%;
		background: #fff;
		height: 63px;
		display: flex;
		justify-content: center;
		line-height: 63px;
		ul{
			height: 63px;
			margin-left: 20%;
			li {
				float: left;
				line-height: 63px;
				width: 140px;
				text-align: center;
				font-size: 17px;
				color: #646464;
				cursor: pointer;
			}
		}
		.isActive{
			color: #2FA4DB !important;
		}
	}
	.container{
		background: #f8f8f8;
		padding: 1.4%;
		::-webkit-scrollbar {
			width: 12px;
			height: 10px;
			margin-top: 5px;
			}
			::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:horizontal {
			border-radius: 6px;
			background: #C0E0F5;
			}
			 
			::-webkit-scrollbar-button {
			display: none;
			}
			 
			::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece {
			background: -webkit-gradient(linear,left);
			}
			 
			::-webkit-scrollbar-track-piece {
			background: #F7F7F7;
			// width: 200px;
			}
		.y_f{
			height: 20%;
			margin-top: 8px;
			margin-bottom: 8px;
			width: 100%;
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			.kuai{
				min-width: 210px;
				height: 90%;
				// display: inline-block;
				margin-right: 26px;
				background: #fff;
				// float: left;
				.kuai_title{
					font-family: '微软雅黑,PingFangSC';
					width: 100%;
					height: 43px;
					border-bottom: 1px solid #ccc;
					font-size: 17px;
					color: #4D4D4D;
					text-indent: 20px;
					line-height: 53px;
				}
				.kuai_content{
					text-align: center;
					// vertical-align: center
					line-height: calc(170%);
					font-size: 28px;
					margin-bottom: 5px;
				}
			}
		}
		.container_top{
			color: #4D4D4D;
			display: flex;
			margin-top: 12px;
			height: 20px;
			line-height: 20px;
			justify-content: space-between;
			span:last-child{
				cursor: pointer;
				&:hover {
					color: #85C8FD;
				}
			}
			&:first-child {
				margin-top: 0px;
			}
		}
		.c_f, .c_s, .c_t{
			margin-top: 9px;
			margin-bottom: 9px;
		}
		.c_f{
			height: 20%;
			width: 100%;
			display: flex;
			// background: red;
			.kuai{
				width: 24.25%;
				height: 100%;
				margin-right: 1%;
				background: #fff;
				box-shadow: 0 2px 8px 0 #ccc;
				span {
					font-family: '微软雅黑,PingFangSC';
				}
				.kuai_title{
					width: 100%;
					line-height: 40px;
					font-family: '微软雅黑,PingFangSC';
					font-size: 17px;
					color: #4D4D4D;
					text-indent: 20px;
					border-bottom: 1px solid #ccc;
				}
			}
			.kuai:last-child{
				margin-right: 0;
			}
		}
		.c_s{
			height: 30%;
			width: 100%;
			display: flex;
			// background: blue;
			.s_f, .s_s, .s_t{
				background: #fff;
				height: 100%;
				margin-right: 1%;
				box-shadow: 0 2px 8px 0 #ccc;
				.come {
					width: 205px;
					height: 100%;
					padding: 10px;
				}
			}
			.s_f{
				width: 32%;
				display: flex;
				// .come {
				// 	.come_t{
				// 		margin-top:40px;
				// 	}
				// 	.come_c{
				// 		span:last-child{
				// 			display: inline;
				// 		}
				// 	}
				// }
			}
			.s_s{
				width: 46%;
				display: flex;
				
			}
			.s_t{
				width: 20%;
				margin-right: 0;
				
			}
		}
		.c_t{
			height: 30%;
			width: 100%;
			display: flex;
			.t_f, .t_s, .t_t{
				background: #fff;
				height: 100%;
				margin-right: 1%;
				box-shadow: 0 2px 8px 0 #ccc;
			}
			.t_f{
				width: 34%;
				display: flex;

				.come{
					height: 100%;
					width: 49%;
					padding: 10px 0 10px 2%;
					vertical-align: center;
					border-right: 14px solid #F7F7F7;
				}
				.come:last-child{
					border-right: 0px !important;
				}
			}
			.t_s{
				width: 41%;
				display: flex;
				.come {
					padding-top: 10px;
				}
			}
			.t_t{
				width: 23%;
				margin-right: 0;
				.come {
					padding: 10px;
					.bottom{
						ul{
							width: 100%;
							li{
								font-size: 12px;
								@media screen and (max-width: 1440px) {
								span:first-child {
									font-size: 20px;
								}
								}
							}
						}
					}	
				}
				
			}
		}
	}
	.come_t{
		width: 165px;
		height:	70%;
		color: #4D4D4D;
		margin-left: 20px;
		// padding-bottom: 20px;
		border-bottom: 1px solid #E5E5E5;
		font-size: 25px;
		span {
			font-family: '微软雅黑,PingFangSC';
			display: inline-block;
			height: 30px;
			line-height: 30px;
		}
		span:nth-child(1){
			font-size: 17px;
		}
		span:nth-child(3){
			font-size: 16px;
			color: #9B9B9B;
		}
		span:nth-child(5){
			font-size: 25px;
		}
		span:nth-child(7) {
			font-size: 14px;
			color: #EC7676;
		}
		.unit {
			font-size: 16px;
			font-family: '微软雅黑,PingFangSC';
			color: #9B9B9B;
		}
	}
	.come_c, .come_r{
		line-height: 60px;
		color: #EC7676;
		padding-left: 20px;
		span{
			display: inline-block;
			font-family: '微软雅黑,PingFangSC';
			margin-right: 8px;
			// padding-right: 30px;
		}
		span:first-child{
			color: #9B9B9B;
		}
		span:nth-child(2){
			color: #4D4D4D;
			font-size: 16px;
		}
	}
			.output_title{
					color: #9B9B9B;
					font-size: 16px;
					width: 98%;
					padding-left: 2%;
					// display: block;
					span:first-child{
						color: #4D4D4D;
						font-size: 17px;
						line-height: 35px;
					}
				}
				.bottom{
					display: flex;
					justify-content: space-between;
					img{
						width: 30%;
						height: 50%;
						margin-right: 5%;
					}
					ul{
						display: flex;
						width: 55%;
						padding-top: 20px;
						text-align: center;
						li{
							width: 33%;
							color: #9B9B9B;
							font-size: 14px;
							height: 35px;
							border-right: 1px solid #ccc;
							span {
								font-family: '微软雅黑,PingFangSC';
							}
							span:first-child{
								font-size: 28px;
								color: #4D4D4D;
								line-height: 40px;
							}
						}
						li:last-child{
							border-right: 0px;
						}
					}
				}
</style>